import {
  MinusCircleOutlined,
  PlusCircleOutlined,
  PlusOutlined,
} from '@ant-design/icons';
import { Button, Input, Space } from 'antd';
import { ErrorList, FormItem, List, YmForm, useForm } from 'ym-design';

const FormPageList = () => {
  const [form] = useForm();
  return (
    <div style={{ maxWidth: '600px' }}>
      <div style={{ marginBottom: '30px' }}>
        <p style={{ fontSize: '12px', marginBottom: '10px' }}>
          1.
          {`<Form fields={[{ name: ['users', 0, 'name'], value: 'zyj1' }]} />`}
          fileds定义List子级Field, Filed['users']是不会reRender的
        </p>
        <p style={{ fontSize: '12px', marginBottom: '10px' }}>
          2. List
          的remove对于List来说是onChange对于List的子级Field来说是cancelField,
          {
            'List.remove ==> [{name:zyj1,age:30},{name:zyj2,age:31}] --> [{name:zyj1,age:30}]'
          }
        </p>
        <p style={{ fontSize: '12px', marginBottom: '10px' }}>
          3. List的子级Field--ComponentWillNumount 是不会触发
          cancelField--onStoreChange.remove
        </p>
        <p style={{ fontSize: '12px', marginBottom: '10px' }}>
          4.验证List.rules时，必须手动调用ErrorList来展示验证信息(meta.errors)因为List(其实内部就是一个Field)没有被FormItem包装
        </p>
      </div>
      <YmForm
        form={form}
        onFieldsChange={(changedfields, fieldDataList) => {
          console.log(
            '--Form--onFieldsChange--changedfields--fieldDataList--:',
            changedfields,
            fieldDataList,
          );
        }}
        onValuesChange={(changedValues, allValues) => {
          console.log(
            '--Form--onValuesChange--changedValues--allValues--:',
            changedValues,
            allValues,
          );
        }}
        onFinish={(values) => {
          console.log('--Form--onFinish---values:', values);
        }}
        onFinishFailed={(errorInfo) => {
          console.log('--Form--onFinishFailed---values:', errorInfo);
        }}
        // fields={[
        //   { name: ['users', 0, 'name'], value: 'zyj1' }
        // ]}
        fields={[{ name: ['users'], value: [{ name: 'zyj1', age: '30' }] }]}
      >
        <List
          name="users"
          // initialValue={[{ name: 'zyj', age: '30' }]}
          rules={[
            { required: true, message: '请填写人员信息' },
            {
              validator(rule, value) {
                if (value && value.length < 2) {
                  return Promise.reject('人员信息不得少于2项');
                }
                return Promise.resolve();
              },
            },
          ]}
        >
          {(fields, { add, remove }, { errors }) => (
            <>
              {fields.map((field, index) => (
                <FormItem
                  key={field.key}
                  label={index === 0 ? '人员' : null}
                  labelCol={index === 0 ? { span: 8 } : {}}
                  wrapperCol={
                    index === 0 ? { span: 16 } : { span: 16, offset: 8 }
                  }
                >
                  <Space direction="horizontal" size="small" align="center">
                    <FormItem name={[field.name, 'name']} label="用户名">
                      <Input placeholder="请输name" />
                    </FormItem>
                    <FormItem name={[field.name, 'age']} label="密码">
                      <Input placeholder="请输年龄" />
                    </FormItem>
                    {fields.length > 1 ? (
                      <MinusCircleOutlined
                        onClick={() => {
                          remove(index);
                        }}
                      />
                    ) : null}
                    <PlusCircleOutlined
                      onClick={() => {
                        add(undefined, index + 1);
                      }}
                    />
                  </Space>
                </FormItem>
              ))}
              <FormItem wrapperCol={{ span: 16, offset: 8 }}>
                <>
                  <Button
                    type="dashed"
                    onClick={() => {
                      add();
                    }}
                    style={{ width: '60%' }}
                    icon={<PlusOutlined />}
                  >
                    Add field
                  </Button>
                  <ErrorList errors={errors} />
                </>
              </FormItem>
            </>
          )}
        </List>
        <FormItem wrapperCol={{ span: 16, offset: 8 }}>
          <Space direction="horizontal">
            <Button htmlType="submit" type="primary">
              submit
            </Button>
            <Button htmlType="reset">reset</Button>
          </Space>
        </FormItem>
      </YmForm>
      <div>
        <p style={{ marginBottom: '10px' }}>
          <button
            onClick={() => {
              console.log(
                '--getFieldValue(users)--:',
                form.getFieldValue('users'),
              );
            }}
          >
            getFieldValue('users')
          </button>
          <button
            onClick={() => {
              console.log(
                '--getFieldValue([users,0,name])--:',
                form.getFieldValue(['users', 0, 'name']),
              );
            }}
          >
            getFieldValue(['users',0,'name'])
          </button>
        </p>
        <p style={{ marginBottom: '10px' }}>
          <button
            onClick={() => {
              console.log('--getFieldsValue()--:', form.getFieldsValue());
            }}
          >
            getFieldsValue()
          </button>
          <button
            onClick={() => {
              console.log(
                '--getFieldsValue(all)--:',
                form.getFieldsValue('all'),
              );
            }}
          >
            getFieldsValue(all)
          </button>
          <button
            onClick={() => {
              console.log(
                '--getFieldsValue(all)--:',
                form.getFieldsValue('asFormListItem'),
              );
            }}
          >
            getFieldsValue('asFormListItem')
          </button>
          <button
            onClick={() => {
              console.log(
                '--getFieldsValue(...)--:',
                form.getFieldsValue([['users', 0, 'name']]),
              );
            }}
          >
            getFieldsValue([['users', 0, 'name']])
          </button>
        </p>

        <p>
          <button
            onClick={() => {
              form.setFieldsValue({
                users: [{ name: 'zyj1', age: '33', test: '44' }],
              });
            }}
          >
            setFieldsValue( users: {`[{ name: 'zyj1', age: '33', test: '44' }]`}{' '}
            )
          </button>
        </p>

        <p>
          <button
            onClick={() => {
              form.setFieldValue(['users', 0, 'name'], 'zyj4');
            }}
          >
            setFieldValue(['users', 0, 'name'], 'zyj4')
          </button>
        </p>

        <p>
          <button
            onClick={() => {
              form.setFields([
                { name: ['users', 0, 'name'], value: 'zyj4' },
                { name: ['users', 0, 'age'], value: '44' },
              ]);
            }}
          >
            setFields(
            {`[{ name: ['users', 0, 'name'], value: 'zyj4' }, { name: ['users', 0, 'age'], value: '44' }]`}
            )
          </button>
        </p>

        <p>
          <button
            onClick={() => {
              form.resetFields([['users', 0, 'name']]);
            }}
          >
            resetFields(['users', 0, 'name'])
          </button>
          <button
            onClick={() => {
              form.resetFields();
            }}
          >
            resetFields()
          </button>
        </p>
      </div>
    </div>
  );
};

export default FormPageList;
